<template>
  <div class="headbar">
    <header class="navbar navbar-default home-header clearfix" role="navigation ">
      <div class="container">
        <div class="navbar-header ">

          <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                  data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
          <div class="home-logo"><a href="../index.html"><img
            src="../assets/login-logo.png"></a>
          </div>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <nav id="bs-navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="index"><a href="index.html">首页</a></li>
            <li class="standard"><a href="standard.html">规范</a></li>
            <li class="tools"><a href="tools.html">工具</a></li>
            <li class="article"><a href="article.html">干货</a></li>
            <li class="login"><a>登录</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="header-blank"></div>
  </div>
</template>

<script>
  import '../js/bootstrap/3.3.5/css/bootstrap.css';
  import '../css/reset.css';
  import '../js/jquery2.1.4.js';
  import '../js/bootstrap/3.3.5/js/bootstrap.js';
  import '../js/fd.js';
  export default {
    name: 'headbar',
    data () {
      return {
        msg: '头部组件'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .navbar-nav > li {
    margin-right: 40px;
    display: inline-block;
    color: #777;
  }

  .navbar-nav > li:last-child {
    margin-right: 0;
    display: inline-block;
    color: #777;
  }

  .navbar-nav > li a {
    font-size: 16px;
    line-height: 30px;
    color: inherit;
  }

  .navbar-nav > li a:hover {
    font-size: 16px;
    line-height: 30px;
  }

  .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
    background-color: #fff !important;
  }

  .nav > li > a:hover::after {
    height: 3px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  .nav > li > a:after {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #387aff;
    content: '';
    opacity: 0;
    -webkit-transition: height .5s, opacity .5s, -webkit-transform .5s;
    transition: height .5s, opacity .5s, transform .5s;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  .navbar-nav .on {
    color: #387aff !important;
  }

  .home-header {
    background: #fff;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    margin: 0 !important;
    border-radius: 0;
  }

  .home-header h1 a, .home-header h2 {
    color: #FFF;
  }

  .header-blank {
    width: 100%;
    height: 62px;
  }

  .home-logo {
    margin-left: 10px;
    line-height: 60px;
    height: 60px;
  }

  .nav-ul {
    float: right;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
  }

  .nav-ul li {
    float: left;
    line-height: 60px;
    font-size: 16px;
    color: #9393ac;
  }

  .nav-ul li a {
    color: #000;
    height: 60px;
    line-height: 60px;
    padding: 0 26px;
    display: inline-block;
  }

  .nav-ul li a:hover {
    color: #039be5;
  }

  @media screen and (max-width: 768px) {
    .home-logo {
      margin-left: 15px;
    }

    .home-logo img {
      width: 128px;
      height: 24px;
    }

  }
</style>
